<template>
	<view class="projectDetailsContent ff-margin-left-12 ff-margin-right-12 ff-font-14 ff-color-222">
		<view class="ff-bg-fff ff-margin-bottom-10 ff-border-radius-10 ff-padding-10">
			<view class="projectDetailsContent-title ff-font-16 ff-font-weight-600 ff-color-blue ff-border-radius-5">
				需求详情</view>
			<view class="projectDetailsContent-info ff-margin-top-15">
				<view class="projectDetailsContent-info-box ff-flex">
					<view class="projectDetailsContent-info-box-left ff-padding-left-5 ff-margin-right-15">
						<view class="ff-margin-bottom-16">需求类别</view>
						<view class="ff-margin-bottom-16">开始日期</view>
						<view v-if="projectDetailsInfo.maintenanceEndTime" class="ff-margin-bottom-16">结束日期</view>
						<view class="ff-margin-bottom-16" v-if="projectDetailsInfo.macroMaintenancePeriodName">维保期限
						</view>
						<view class="ff-margin-bottom-16">项目预算(元)</view>
						<view class="ff-margin-bottom-16">联 系 人</view>
						<view>联系电话</view>
					</view>
					<view>
						<view class="ff-margin-bottom-16">维保</view>
						<view>
							<view v-if="projectDetailsInfo.maintenanceTime" class="ff-margin-bottom-16">
								{{ projectDetailsInfo.maintenanceTime || '/'}}
							</view>
							<view v-else class="ff-margin-bottom-16">
								{{ projectDetailsInfo.maintenanceStartTime || '/' }}
							</view>
						</view>
						<view v-if="projectDetailsInfo.maintenanceEndTime" class=" ff-margin-bottom-16">
							{{ projectDetailsInfo.maintenanceEndTime || '/' }}
						</view>
						<view v-if="projectDetailsInfo.macroMaintenancePeriodName" class="ff-margin-bottom-16">
							{{ projectDetailsInfo.macroMaintenancePeriodName }}
						</view>
						<view class="ff-margin-bottom-16">{{ projectDetailsInfo.projectBudget || '/' }}</view>
						<view class="ff-margin-bottom-16">{{ projectDetailsInfo.projectLink || '/' }}</view>
						<view>{{ projectDetailsInfo.projectEncPhone || '/' }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ff-bg-fff ff-margin-bottom-10 ff-border-radius-10 ff-padding-10">
			<view class="projectDetailsContent-title ff-font-16 ff-font-weight-600 ff-color-blue ff-border-radius-5">
				建筑物详情</view>
			<view class="projectDetailsContent-info ff-margin-top-15">
				<view class="projectDetailsContent-info-box">
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16 ff-line-height-1-3">
						<view class="projectDetailsContent-info-box-left">建筑物名称</view>
						<view>{{ projectDetailsInfo.buildings[0].buildingName || '/' }}</view>
					</view>
					<view class="ff-flex ff-padding-left-5 ff-margin-bottom-16 ff-line-height-1-3">
						<view class="projectDetailsContent-info-box-left">地址</view>
						<view class="projectDetailsContent-info-box-right">
							{{ projectDetailsInfo.buildings[0].buildingAddr || '/' }}
						</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16 ff-line-height-1-3">
						<view class="projectDetailsContent-info-box-left">类型</view>
						<view>{{ projectDetailsInfo.buildings[0].buildingNewTypeTopidName || '/' }}</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16 ff-line-height-1-3">
						<view class="projectDetailsContent-info-box-left">用途</view>
						<view>{{ projectDetailsInfo.buildings[0].buildingNewTypeName || '/' }}</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16 ff-line-height-1-3">
						<view class="projectDetailsContent-info-box-left">高度(米)</view>
						<view>{{ projectDetailsInfo.buildings[0].buildingHeight }}</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16 ff-line-height-1-3">
						<view class="projectDetailsContent-info-box-left">地上层数(层)</view>
						<view>{{ projectDetailsInfo.buildings[0].buildingUpLayers }}</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16 ff-line-height-1-3">
						<view class="projectDetailsContent-info-box-left">地下层数(层)</view>
						<view>{{ projectDetailsInfo.buildings[0].buildingDownLayers }}</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-line-height-1-3">
						<view class="projectDetailsContent-info-box-left">面积(m²)</view>
						<view>{{ projectDetailsInfo.buildings[0].buildingArea }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="projectDetailsContent-table" v-if="projectDetailsInfo.buildings[0].buildingTypes.length > 0">
			<view class="ff-bg-fff ff-padding-10 ff-border-radius-10 ff-margin-bottom-10 ff-bg-fff">
				<view
					class="projectDetailsContent-title ff-font-16 ff-font-weight-600 ff-color-blue ff-border-radius-5 ff-margin-bottom-15">
					消防设施需求详情</view>
				<view class="projectDetailsContent-tableBox"
					v-for="(item, index) of projectDetailsInfo.buildings[0].buildingTypes" :key="index">
					<view class="ff-font-15 ff-font-weight-600 ff-margin-bottom-18">{{ index + 1 }}. {{ item.typeName }}
					</view>
					<view class="projectDetailsContent-table-box">
						<view class="ff-flex">
							<view class="table-left-title">设施设备</view>
							<view class="table-right ff-text-center">数量</view>
						</view>
						<view class="ff-flex ff-align-items-one" v-for="itemClassify of item.items"
							:key="itemClassify.itemId">
							<view class="table-left ff-line-height-1-3">{{ itemClassify.itemName }}</view>
							<view class="table-right ff-text-center">{{ itemClassify.number }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="projectDetailsContent-but"
			v-if="projectDetailsInfo.status == 0 || projectDetailsInfo.status == 1 || projectDetailsInfo.status == 5">
			<u-button shape="circle" type="primary" @click="defineSubmitk(projectDetailsInfo.id)">取消发布</u-button>
		</view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<u-modal v-model="locationModal" title="取消发布" show-cancel-button="true" @confirm="unpublishConfirm"
			cancel-text="我再想想" confirm-text="确定取消" :content-style="{ 'line-height': '1.5' }" content="请确认是否取消该项目的发布？" />
	</view>
</template>

<script>
	export default {
		name: 'projectDetailsContent',
		props: ['projectDetailsInfo'],
		data() {
			return {
				locationModal: false, // 取消发布的弹框显/隐
				projectId: '' // 项目的id
			};
		},
		methods: {
			// 取消发布
			defineSubmitk(projectId) {
				this.locationModal = true;
				this.projectId = projectId;
			},
			// 取消该项目的发布
			async unpublishConfirm() {
				this.$refs.loading.openLoading('提交中···');
				const data = await this.$http.post({
					url: `/project/del/${this.projectId}`
				});
				// console.log('取消发布效果返回的数据----', data);
				if (data.code == 200) {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'success'
					});
					let that = this;
					setTimeout(() => {
						that.$pageJump.reLaunch('/pages/maintenance/company/Company');
					}, 500);
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.projectDetailsContent {
		&-title {
			background: linear-gradient(to right, #e5eeff, #ffffff);
			padding: 24rpx 20rpx 20rpx;
		}

		&-info {
			&-box {
				&-left {
					width: 29%;
					margin-right: 37rpx;
					color: #a6a6a6;
				}

				&-right {
					width: 64%;
				}
			}
		}

		&-table {
			&-box {
				margin-bottom: 50rpx;

				.ff-flex {
					padding: 24rpx 58rpx;

					.table-left-title {
						width: 70%;
						margin-right: 10%;
					}

					.table-left {
						width: 70%;
						margin-right: 10%;
						color: #5c5f65;
					}

					.table-right {
						flex: 1;
					}
				}
			}
		}

		&-table .ff-flex:nth-child(odd) {
			background-color: #f8f8f8;
		}

		&-but {
			margin: 0 5%;
			margin: 60rpx 5% 100rpx;
			width: 90%;
		}
	}

	.projectDetailsContent-tableBox:last-child .projectDetailsContent-table-box {
		margin-bottom: 0;
	}
</style>